<template>
  <header>
    <div class="logo"><img src="../assets/head/taitou.png" alt="logo" /></div>
    <div class="head-right">
      <div class="homepage" @click="toLink()">
        <el-icon><house /></el-icon>
        首页
      </div>
      <div class="user">
        <img src="../assets/head/touxiang.png" alt="" />
        admin
        <el-icon><caret-bottom /></el-icon>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: "HeadModule",
  methods: {
    toLink() {
      this.$router.push({
        name: "/home",
      });
    },
  },
};
</script>

<style>
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.logo {
  width: 400px;
  height: 60px;
  line-height: 60px;
  background-image: url(../assets/head/toububj.png);
}
.logo img {
  margin-left: 16px;
  vertical-align: middle;
}
.head-right {
  display: flex;
  justify-content: space-between;
  width: 187px;
  margin-right: 16px;
  background-color: #fff;
}
.homepage {
  /* background-image: url(); */
  line-height: 60px;
  font-size: 14px;
  color: #898989;
}
.homepage:hover {
  color: #ff5d0a;
  cursor: pointer;
}
.user {
  line-height: 60px;
  font-size: 14px;
  color: #101010;
}
.user:hover {
  color: #ff5d0a;
  cursor: pointer;
}
.user img {
  vertical-align: middle;
}
</style>